<template>
  <div class="contentIndexList" id="contentIndexList">
    <!-- <contentHead @swith="swith" @changeOpen="changeOpen" :resData="params" :channelId="props.channelId"
      :contentData="typeData" @changePage="changePage" @resetOptions="resetOptions"></contentHead> -->
    <contentTable v-if="isSwith == 1" :configData="configData" @changePage="changePage" :contentData="contentData.records"
      :isOpen="isOpen"></contentTable>
    <contentList v-else :configData="configData" :channelId="props.channelId" @changePage="changePage"
      :contentData="contentData.records" :isOpen="isOpen"></contentList>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, createVNode, computed, watch } from "vue";
import contentHead from "@/c-views/content/contentHead.vue";
import contentTable from "@/c-views/content/contentTable.vue";
import contentList from "@/c-views/content/contentList.vue";
import request from "@/api/index";
import { useRoute, useRouter } from "vue-router";
import {
  scrollType,
  dataSourceType,
  detailDataType,
  configDataType,
  modeProp,
} from "@/type.d";
// route
const route = useRoute();
const isSwith = ref<number>(1); //图文或列表.
const isOpen = ref<boolean>(true); //是否展开或收起.
const contentData = ref<dataSourceType>({});
let configData = reactive<configDataType>({ total: 0, size: 10, records: [] });
const props = defineProps({
  channelId: {
    type: Number,
    default: null,
  },
});
let params: dataSourceType = ref({
  //头部筛选请求参数格式
  bornType: null,
  channelId: props.channelId || route.query.channelId || null,
  createTimeEnd: null,
  createTimeStart: null,
  // extend: {},
  pageNum: 1,
  pageSize: 10,
  publishTimeEnd: null,
  publishTimeStart: null,
  secretId: null,
  sortType: null,
  status: null,
  title: null,
  typeId: null,
});
const changeOpen = (num: boolean) => {
  isOpen.value = num;
};
const typeData = ref<any>([]);
watch(
  () => props.channelId,
  (newVal, oldVal) => {
    params.value.channelId = newVal || null;
    fetchContentPage();
  },
  { deep: true }
);
// 切换图文、列表
const swith = (num: number) => {
  isSwith.value = num;
};
// 请求内容分页数据
const fetchContentPage = async (datas: dataSourceType = {}) => {
  const data = await request.fetchContentPage(params.value);

  configData.total = data.data.total;
  configData.records = data.data.records.map((item: dataSourceType) => {
    return Object.assign(item, { checked: false });
  });
};
const resetOptions = async (data: any) => {
  params.value = {
    bornType: null,
    channelId: props.channelId || null,
    createTimeEnd: null,
    createTimeStart: null,
    // extend: {},
    pageNum: 1,
    pageSize: 10,
    publishTimeEnd: null,
    publishTimeStart: null,
    secretId: null,
    sortType: null,
    status: null,
    title: null,
    typeId: null,
  };
};

// 操作触发
const changePage = async (data: any) => {
  params.value.pageNum = data.pageCurrent;
  params.value.pageSize = data.pageSize;

  fetchContentPage();
  // pageCurrent.value = data.pageCurrent;
  // pageSize.value = data.pageSize;
};
// 内容类型
const fetchContentTypePageList = async () => {
  contentData.value = await request.fetchContentTypePageList();
  typeData.value = [{ typeName: "全部", id: null }, ...contentData.value.records];
};
onMounted(() => {
  fetchContentPage();
  fetchContentTypePageList();
});
</script>

<style lang="less" scoped>
.contentIndexList {
  position: absolute;
  background-color: #fff;
  // background-color: red;
  width: 100%;
  height: 100%;
  padding: 24px 0;
  // height: calc(100% - 84px);
  flex: 1;
  // height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  // position: relative;
}
</style>
